<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>food</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
        <table id="food" class="table">
            <tr>
                <td> <button type="button" class="btn btn-primary" @click="save()">
                    <span class="glyphicon glyphicon-plus"></span>
                    添加</button></td>
            </tr>
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>图片</td>
                <td>操作</td>
            </tr>
            <tr v-for="l in foods" id="l.id">
                <td>{{l.id}}</td>
                <td>{{l.name}}</td>
                <td><img :src="'images/'+l.pic" width="80" /></td>
                <td><button type="button" class="btn btn-primary" @click="dl(l.id)">删除</button>
                    <button type="button" class="btn btn-primary" @click="updatebyid(l.id)">修改</button>
                </td>
            </tr>

            <tr>
                <td colspan="4" align="center">
                    <!--显示分页信息-->
                    <div class="row">
                        <!--点击分页-->
                        <div class="col-md-6">
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <li><a href="javascript:;" @click="query(1)">首页</a></li>
                                    <!--上一页-->
                                    <li>
                                        <a :class="{'hidden':!pageInfo.hasPreviousPage}" href="javascript:;" @click="query(pageInfo.pageNum-1)" aria-label="Previous">
                                            <span aria-hidden="true">«</span>
                                        </a>
                                    </li>
                                    <!--循环遍历连续显示的页面，若是当前页就高亮显示，并且没有链接-->
                                    <li v-for="page_num in pageInfo.navigatepageNums"   :class="{'active':page_num == pageInfo.pageNum}" >
                                        <a href="javascript:;"   :class="{'hidden':page_num == pageInfo.pageNum}" @click="query(page_num)">{{page_num}}</a>
                                        <a :class="{'hidden':page_num != pageInfo.pageNum}" href="javascript:;" @click="query(page_num)"  >{{page_num}}</a>
                                    </li>
                                    <!--下一页-->
                                    <li>
                                        <a :class="{'hidden':!pageInfo.hasNextPage}" href="javascript:;" @click="query(pageInfo.pageNum+1)"
                                           aria-label="Next" >
                                            <span aria-hidden="true">»</span>
                                        </a>
                                    </li>
                                    <li><a href="javascript:;" @click="query(pageInfo.pages-0)">尾页</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <!--分页结束-->
                </td>
            </tr>
        </table>

        <!--添加模态框开始-->
        <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" style="width: 35%" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">添加</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table">
                            <tr>
                                <td>名称</td>
                                <td><input type="text" v-model="food.name" ></td>
                            </tr>
                            <tr>
                                <td>图片</td>
                                <td><input type="file" @change="getfile($event)">
                                    <span id="img">图片预览..</span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                                @click="foodadd()">添加</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
</body>
<script>
    var app= new Vue({
        el:"#food",
        data:{
            foods:[],
            pageInfo:'',
        },
        methods:{
            //点击下一页 上一页 等等按钮的事件 传递页码
            query(index){
                $.getJSON("/query",{"startPage":index},function(json){
                    if(json.code==200){
                        app.foods=json.data.list; //给集合属性赋值
                        app.pageInfo=json.data.pageInfo;
                    }else{
                        //跳到一个友好的错误页面 显示一个什么东西
                        alert(json.mess)
                    }
                });
            },
            dl(id){
                if(window.confirm("你确认删除吗？"))
                $.getJSON("/dl/"+id,function (aa) {
                    if (aa.code == 200) {
                        $.getJSON("query", function (json) {
                            if(json.code==200){
                                app.foods=json.data.list; //给集合属性赋值
                                app.pageInfo=json.data.pageInfo;
                            }else{
                                //跳到一个友好的错误页面 显示一个什么东西
                                alert(json.mess)
                            }
                        });
                     }
                });
            },
            save(){
                //显示模态框
                $('#myModal').modal('show');
            },

            updatebyid(id){
                sessionStorage.setItem("id",id);
                location="update.html";
            }
        },
        created(){
            $.getJSON("/query",function (json) {
                if(json.code==200){
                    app.foods=json.data.list; //给集合属性赋值
                    app.pageInfo=json.data.pageInfo;
                }else{
                    //跳到一个友好的错误页面 显示一个什么东西
                    alert(json.mess)
                }
            });
        }
    });


    var myModal = new Vue({
        el:"#myModal",
        data:{
            food:{
                name:'',
            },
            files:'',
        },
        methods:{
            //选中图片的事件
            getfile(event){
                this.files=event.target.files;
                //  获得上传的文件数组的第一个
                var file=this.files[0]
                //  实例化
                var reader=new FileReader();
                // 设置回调
                reader.onload=function(e){
                    //创建一个图片对象
                    let images=$("<img src='' width='80' />");
                    //给图片对象赋值
                    images.attr("src",e.target.result);
                    //放到span标签里面
                    $("#img").html(images);
                }
                // 加载图片
                reader.readAsDataURL(file);


            },


            foodadd() {
                //html任意出现 null 会自动加上  'null' //就会变成字符串的空
                let fdate=new FormData();  //包含文件的数据对象
                if(this.files!=''){
                    fdate.append("files",this.files[0]); //  addfood?file=xxx&name=刘德华
                }
                for(let f in this.food){
                    if(this.food[f]!=null&&this.food[f]!='') {
                        fdate.append(f, this.food[f]);// <input name='属性名称f' value="属性的值[f]"
                    }
                }


                $.ajax({
                    url: "save",
                    type: 'POST',
                    cache: false,
                    data: fdate,
                    processData: false,   //文件上传
                    contentType: false,
                    dataType:"json", //回调类型
                    beforeSend: function(){
                        //上传之前你想干嘛
                    },
                    success : function(json) {
                        if(json.code==200) {
                            alert("成功");
                            $.getJSON("/query",function (json) {
                                if(json.code==200){
                                    app.foods=json.data.list; //给集合属性赋值
                                    app.pageInfo=json.data.pageInfo;
                                }else{
                                    //跳到一个友好的错误页面 显示一个什么东西
                                    alert(json.mess)
                                }
                            });
                                this.food.name='',
                                this.files='',
                            $("#myModal").modal('hide'); //关闭层
                        }else{
                            //什么提示
                            alert("错误");
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //上传异常给一个什么意思
                        alert("错误2");
                    },
                });
            }
        }
    });
</script>
</html>